<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import mapJson from "@/assets/json/city";
export default {
  methods: {
    initMap() {
      const _t = this;
      let myMap = 'myMap'
      let myChart = echarts.init(document.getElementById("container"));
      echarts.registerMap(myMap, { geoJSON: mapJson });
      myChart.showLoading();
      myChart.hideLoading();
      // 终点值
      let endMap = {
        name: '北京',
        map: [116.4551, 40.2539]
      }
      // 起点值
      let mapList = [
        {
          name: '新疆',
          map: [87.9236, 43.5883]
        },
        {
          name: '上海',
          map: [121.4648, 31.2891]
        },
        {
          name: '云南',
          map: [102.9199, 25.4663]
        }
      ];
      // 配置项数组
      let series = [];
      mapList.forEach(ele => {
        series.push({
          type: 'lines',
          zlevel: 2, // 用于canvas分层
          // 线特效配置
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          // 线条样式配置
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: .3 //尾迹线条曲直度
            }
          },
          // 线数据集
          data: [{
            coords: [
              ele.map,
              endMap.map
            ]
          }]
        },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo', // 采用地理坐标系
            zlevel: 2, // canvas分层
            //涟漪特效
            rippleEffect: {
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [-36, 18], //偏移设置
                //圆环显示文字
                formatter: function (params) {
                  return ele.name;
                },
                fontSize: 13
              },
            },
            data: [{
              name: ele.name,
              value: ele.map
            }]
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo', // 采用地理坐标系
            zlevel: 2, // canvas分层
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}',
              }
            },
            symbol: 'pin', // 标记形状
            symbolSize: 30, // 标记大小
            data: [{
              name: endMap.name,
              value: endMap.map
            }],
        })
      })
      let option = {
        geo: {
          map: myMap,
          zoom: 1.2,
          itemStyle: {
            normal: {
              borderColor: '#516a89', //省市边界线
              borderWidth: 1
            }
          }
        },
        series: series
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
}
</style>